<template>
  <div class="tutorial-container">
    <aside class="sidebar">
      <h3>教程目录</h3>
      <ul>
        <li v-for="tutorial in tutorials" :key="tutorial.path">
          <router-link :to="tutorial.path">{{ tutorial.title }}</router-link>
        </li>
      </ul>
    </aside>
    <main class="content">
      <router-view />
    </main>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const tutorials = ref([
  { 
    path: '/tutorial/01-intro', 
    title: '01 - 认识 Pinia' 
  },
  { 
    path: '/tutorial/02-define-store-options', 
    title: '02 - 定义 Store (选项式)' 
  },
  { 
    path: '/tutorial/03-state-options', 
    title: '03 - State (选项式)' 
  },
  { 
    path: '/tutorial/04-getters-options', 
    title: '04 - Getters (选项式)' 
  },
  { 
    path: '/tutorial/05-actions-options', 
    title: '05 - Actions (选项式)' 
  },
  { 
    path: '/tutorial/02-define-store-composition', 
    title: '02 - 定义 Store (组合式)' 
  },
  { 
    path: '/tutorial/03-state-composition', 
    title: '03 - State (组合式)' 
  },
  { 
    path: '/tutorial/04-getters-composition', 
    title: '04 - Getters (组合式)' 
  },
  { 
    path: '/tutorial/05-actions-composition', 
    title: '05 - Actions (组合式)' 
  },
  { 
    path: '/tutorial/06-axios-options', 
    title: '06 - Axios (选项式)' 
  },
  { 
    path: '/tutorial/07-weather-app', 
    title: '07 - 综合案例 - 天气预报应用' 
  }
]);
</script>

<style scoped>
.tutorial-container {
  display: flex;
  min-height: calc(100vh - 60px);
}

.sidebar {
  width: 280px;
  padding: 20px;
  border-right: 1px solid #eaecef;
  background-color: #f8f9fa;
}

.sidebar h3 {
  margin-top: 0;
  margin-bottom: 16px;
  font-weight: 600;
  font-size: 1.25em;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  margin-bottom: 8px;
}

.sidebar a {
  display: block;
  padding: 8px 0;
  color: #2c3e50;
  text-decoration: none;
  transition: color 0.2s;
}

.sidebar a:hover {
  color: #42b983;
}

.sidebar a.router-link-active {
  color: #42b983;
  font-weight: 600;
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
</style> 